import React from "react";
import { Typography, Divider, Collapse } from "antd";

const { Title, Paragraph, Text } = Typography;
const { Panel } = Collapse;

const installCode = `npm install redux react-redux`;

const reducerCode = `// store/counterReducer.js
const initialState = { count: 0 };
export default function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}`;

const storeCode = `// store/index.js
import { createStore } from 'redux';
import counterReducer from './counterReducer';
const store = createStore(counterReducer);
export default store;`;

const providerCode = `// main.jsx 或 App.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './store';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);`;

const useCode = `// 组件中获取和调用 Redux 状态
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

export default function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  return (
    <div>
      <div>当前 count: {count}</div>
      <button onClick={() => dispatch({ type: 'increment' })}>加1</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>减1</button>
    </div>
  );
}`;

const commonCode = `// 获取状态
const value = useSelector(state => state.xxx);
// 派发 action
const dispatch = useDispatch();
dispatch({ type: 'actionType', payload });
// 获取多个状态
const { a, b } = useSelector(state => ({ a: state.a, b: state.b }));`;

const fullDemoCode = `// 完整最小可运行 Redux 计数器案例
// store/counterReducer.js
const initialState = { count: 0 };
export default function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// store/index.js
import { createStore } from 'redux';
import counterReducer from './counterReducer';
const store = createStore(counterReducer);
export default store;

// main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

// App.jsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
export default function App() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  return (
    <div>
      <div>当前 count: {count}</div>
      <button onClick={() => dispatch({ type: 'increment' })}>加1</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>减1</button>
    </div>
  );
}`;

export default function ReduxDocPage() {
  return (
    <div style={{ maxWidth: 900, margin: "0 auto", padding: 24 }}>
      <Title level={2}>React Redux 使用文档</Title>
      <Paragraph>
        <Text strong>
          本页详细介绍 Redux 在 React 项目中的完整使用流程，包括安装、创建
          store、定义 reducer、Provider
          包裹、组件中获取/调用公共状态和方法，以及常见用法和完整案例。
        </Text>
      </Paragraph>
      <Divider />
      <Collapse accordion>
        <Panel header={<Text code>1. 安装 Redux 及 React-Redux</Text>} key="1">
          <Paragraph>在项目根目录下执行：</Paragraph>
          <pre>
            <code>{installCode}</code>
          </pre>
        </Panel>
        <Panel header={<Text code>2. 定义 reducer 和初始 state</Text>} key="2">
          <Paragraph>
            在 <Text code>store/counterReducer.js</Text> 中：
          </Paragraph>
          <pre>
            <code>{reducerCode}</code>
          </pre>
        </Panel>
        <Panel header={<Text code>3. 创建 Redux store</Text>} key="3">
          <Paragraph>
            在 <Text code>store/index.js</Text> 中：
          </Paragraph>
          <pre>
            <code>{storeCode}</code>
          </pre>
        </Panel>
        <Panel header={<Text code>4. Provider 包裹 React 应用</Text>} key="4">
          <Paragraph>
            在 <Text code>main.jsx</Text> 或 <Text code>App.jsx</Text> 中：
          </Paragraph>
          <pre>
            <code>{providerCode}</code>
          </pre>
        </Panel>
        <Panel
          header={<Text code>5. 组件中获取/调用 Redux 状态和方法</Text>}
          key="5"
        >
          <Paragraph>在组件中：</Paragraph>
          <pre>
            <code>{useCode}</code>
          </pre>
        </Panel>
        <Panel header={<Text code>6. 常见用法总结</Text>} key="6">
          <Paragraph>常用的获取/调用方式：</Paragraph>
          <pre>
            <code>{commonCode}</code>
          </pre>
        </Panel>
        <Panel header={<Text code>7. 完整最小可运行案例</Text>} key="7">
          <Paragraph>包含 reducer、store、Provider、组件的完整代码：</Paragraph>
          <pre>
            <code>{fullDemoCode}</code>
          </pre>
        </Panel>
      </Collapse>
    </div>
  );
}
